<template>
  <div class="app-container">
    <div class="user-edit">
      <div class="user-edit-form">
        <el-form :model="formData" label-width="150px" :rules="rules" ref="formData">
          <el-form-item label="保单号：">
            <div v-for="item in danArr" :key="item">{{item}}</div>
            {{job}}
          </el-form-item>
          <el-form-item label="组织机构：" class="is-required" prop="units">
            <tree-select :treeData="treeData" :treeProps="treeProps" v-model="units" :multiple="false" placeholder="请选择组织" @setSelectedId="setSelectedId">
            </tree-select>
            <!-- <el-cascader size="mini" v-model="belongOrganizationUnitId" class="wd230" :options="units" :props="unitsprops" @change="unitChange" :show-all-levels="false"></el-cascader>
                    <input type="hidden" v-model="formData.belongOrganizationUnitId"> -->
          </el-form-item>
          <el-form-item label="业务员：" class="is-required" prop="salesmanId">
            <el-select placeholder="请选择" v-model="formData.salesmanId" class="wd230" size="mini" @change='salesmanIdChange'>
              <el-option size="mini" v-for="item in userlist" :key="item.id" :label="item.userName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工号：" class="is-required" prop="staffId">
            <el-select v-model="formData.staffId" placeholder="请选择" class="wd230" size="mini" @change='staffIdChange'>
              <el-option size="mini" v-for="item in staffIds" :key="item.id" :label="item.staffAccount" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button size="small" type="primary" @click="luru('formData')">录 入</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import treeSelect from "@/components/tree-select/tree.vue";

export default {
  data() {
    return {
      formData: {},
      treeSelected: "",
      treeData: [],
      treeProps: {
        label: "displayName",
        children: "orgs",
        level: "depth"
      },
      job: "",
      danArr: [],
      rules: {
        units: [
          { required: true, message: "请选择组织机构", trigger: "change" }
        ],
        staffId: [{ required: true, message: "请选择工号", trigger: "change" }],
        salesmanId: [
          { required: true, message: "请选择工号", trigger: "change" }
        ]
      },
      staffIds: [],
      userlist: []
    };
  },
  components: {
    treeSelect
  },
  created() {
    let routeParams = this.$route.query;
    if (routeParams) {
      let fir = routeParams.fir;
      let sec = routeParams.sec;
      let job = routeParams.job;
      this.job = job;
      let iid = routeParams.iid;
      this.iid = iid;
      let danArr = [];
      if (fir) {
        danArr.push(fir);
      }
      if (sec) {
        danArr.push(sec);
      }
      this.danArr = danArr;
      console.log(routeParams);
      this.isEdit = true;
      let params = {};
      this.post(params, "services/app/common/GetCurrentOrganizationUnits").then(
        rs => {
          console.log(rs);

          if (rs.success) {
            let data = rs.result;
            let arr = [];
            arr.push(data);
            this.treeData = arr;
            console.log(arr);
          }
        }
      );
      this.loadStaff(iid);
    }
  },
  methods: {
    luru(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            salesmanId: this.formData.salesmanId,
            staffId: this.formData.staffId,
            riskCodes: this.danArr
          };
          this.post(params, "services/app/guaranteeSlip/CreateRisk").then(
            rs => {
              if (rs.success) {
                console.log(rs);
                this.$notify({
                  title: "登记成功",
                  message: "保单登记成功",
                  type: "success"
                });
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    loadStaff(val) {
      let params = {
        id: val
      };
      this.post(params, "services/app/common/GetInsuranceStaffs").then(rs => {
        if (rs.success) {
          console.log(rs);
          this.staffIds = rs.result.items;
        }
      });
    },
    loadUser(val) {
      if (val) {
        let arr = [];
        arr.push(val);
        let params = { organizationUnits: arr };
        this.post(params, "services/app/common/GetUsers").then(rs => {
          if (rs.success) {
            this.userlist = rs.result.users;
            console.log(rs);
          }
        });
      }
      console.log(this.formData.salesmanId);
    },
    loadUnit() {
      let params = {};
      this.post(params, "services/app/user/GetCurrentOrganizationUnits").then(
        rs => {
          if (rs.success) {
            console.log(rs);
          }
        }
      );
    },

    setSelectedId(val) {
      // if (val instanceof Array) {
      //   this.treeSelectArr = val;
      // } else {
      //   this.treeSelected = val;
      // }
      console.log(val);
      this.formData.units = val;
      this.loadUser(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.user-edit {
  background: #fff;
  padding: 20px;
  height: 550px;
  border-radius: 3px;
}
</style>

